<template>
	<div class="front bj" v-loading="loading" element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#fff">
		<el-scrollbar style="height: 100%;">
			<el-form :model="formData" ref="formRef" :rules="formRules" label-width="120px" label-position="left">
				<el-form-item label="审核人：" prop="name">
	                <el-select v-model="formData.name" clearable placeholder="选择审核人" style="width: 100% !important;">
	                    <el-option v-for="item in reviewer" :key="item['id']" :label="item['name']" :value="String(item['id'])"></el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="并列审核人1：" prop="name1">
	                <el-select v-model="formData.name1" clearable placeholder="选择并列审核人1" style="width: 100% !important;">
	                    <el-option v-for="item in reviewer" :key="item['id']" :label="item['name']" :value="String(item['id'])"></el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="并列审核人2：" prop="name2">
	                <el-select v-model="formData.name2" clearable placeholder="选择并列审核人2" style="width: 100% !important;">
	                    <el-option v-for="item in reviewer" :key="item['id']" :label="item['name']" :value="String(item['id'])"></el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="并列审核人3：" prop="name3">
	                <el-select v-model="formData.name3" clearable placeholder="选择并列审核人3" style="width: 100% !important;">
	                    <el-option v-for="item in reviewer" :key="item['id']" :label="item['name']" :value="String(item['id'])"></el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="节点类型：" prop="nodeType">
	                <el-select v-model="formData.nodeType" clearable placeholder="选择节点类型" style="width: 100% !important;">
	                    <el-option :label="'审核'" value="0"></el-option>
	                    <el-option :label="'知会'" value="1"></el-option>
	                    <el-option :label="'抄送'" value="2"></el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="生成单据：" prop="generateDocument" style="margin-bottom: 10px!important;">
	                <el-checkbox v-model="formData.generateDocument"></el-checkbox>
	            </el-form-item>
	            <el-form-item>
	                <el-button type="primary" size="small" @click="save('formRef')">保存</el-button>
	                <el-button type="danger" size="small" @click="close">关闭</el-button>
	            </el-form-item>
			</el-form>
		</el-scrollbar>
	</div>
</template>
<script>
export default {
	data() {
 		//检测审核人是否存在
 		let checkedName = (rule, value, callback) => {
 			let nameArray = ['name', 'name1', 'name2', 'name3'],		//存储要校验的属性名
 				index = nameArray.indexOf(rule.field),		//从数组中找到当前匹配属性的索引
 				newArray = nameArray.splice(index, 1);		//从数组中删除当前要比对的属性
 			let tableData = this.$store.state.verifyProcessStore.reviewerTableData;
 			//校验当前表格数据是否已经存在该审核人
 			if(tableData.length > 0) {
 				tableData.forEach(tableItem => {
 					nameArray.forEach(nameItem => {
 						if(value) {
 							if(tableItem[nameItem] == value || tableItem[newArray[0]] == value || this.formData[nameItem] == value) {
 								return callback(new Error('审核人已经存在'));
 							}
 						}
 					});
 				});
 				callback();
 			} else {
 				nameArray.forEach(item => {
	 				if(value == this.formData[item]) {
	 					return callback(new Error('审核人已经存在'));
	 				} else {
	 					callback();
	 				}
	 			});
 			}
 		}
		return {
			loading: true,
			formData: {
				generateDocument: false,		//是否生成单据
			},
			formRules: {
				name: [{required: true, message: '审核人不能为空', triggle: 'change'}, {validator: checkedName, triggle: 'change'}],
				name1: [{validator: checkedName, triggle: 'change'}],
                name2: [{validator: checkedName, triggle: 'change'}],
                name3: [{validator: checkedName, triggle: 'change'}],
                nodeType: [{required: true, message: '节点类型不能为空', triggle: 'change'}]
			},
			reviewer: [],		//审核人
		}
	},
	computed: {
		systemId() {
			return this.$store.state.systemId;
		}
	},
	methods: {
		getReviewerData() {			//获取审核人数据
			this.loading = true;
			this.$http.get('employee/findEmployeeByDepartment?systemId=' + this.systemId + '&id=0').then(res => {
				if(res.data.code == 20001) {
					setTimeout(() => {
						if(res.data.data) {
							this.reviewer = res.data.data;
							this.loading = false;
						}
					}, 500);
				} else {
					setTimeout(() => {
						this.reviewer = [];
						this.loading = false;
					}, 500);
				}
			}).catch(() => {
				setTimeout(() => {
					this.reviewer = [];
					this.loading = false;
				}, 500);
			});
		},
		save(formName) {			//保存
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let store = this.$store.state.verifyProcessStore;
					let data = {
						level: 5,
                        name: this.formData['name'],
                        name1: this.formData['name1'],
                        name2: this.formData['name2'],
                        name3: this.formData['name3'],
                        nodeType: Number(this.formData['nodeType']),	//节点类型 0 == 审核 1 == 知会 2 == 抄送
                        generateDocument: Number(this.formData['generateDocument']),		//是否生成单据
                    }
                    this.$store.commit('verifyProcessStore/appendNode', data);
                    this.close();
				}
			});
		},
		close() {           //关闭
            let index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
            parent.layer.close(index);
        }
	},
	created() {
        this.getReviewerData();
    }
}
</script>